<div class="header">
    <h1 class="page-title">商品列表</h1>
</div>

<div class="well">
    <!-- search button -->
    <form action="/admin/goodsList" method="get" class="form-search">
        <div class="row-fluid" style="text-align: left;">
<!--            多条件搜索-->
            <div class="pull-left span4 unstyled">
<!--                展示搜索条件-->
                <p> 商品名称：<input class="input-medium" name="goods_name" value="{$goods_name}" type="text"></p>
            </div>
            <div class="pull-left span4 unstyled">
                <select name="goods_status" id="">
                    <option value="">请选择商品状态</option>
<!--                    == 双等号判断 只判断值
===三等号 判断是数据类型和值

-->
                    <option value="1" {$goods_status == 1 ? 'selected' : ''}>上架</option>
                    <option value="0" {$goods_status == 0 ? 'selected' : ''}>下架</option>
                </select>

<!--                自己添加分类的搜索条件-->

            </div>
        </div>
        <button type="submit" class="btn">查找</button>
        <a class="btn btn-primary" href="/admin/goodsAdd">新增</a>
    </form>

    <button class="batch-del">批量删除</button>
</div>
<div class="well">
    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品logo</th>
            <th>商品状态</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
<!--        循环输出数据-->
        {foreach $data as $value}
            <tr class="success" data-id="{$value->id}">
                <td><input type="checkbox" class="checkbox" data-id="{$value->id}"></td>
                <td>{$value->id}</td>
<!--                解析html代码-->
                <td><a href="javascript:void(0);">{$value->goods_name|raw}</a></td>
                <td>{$value->goods_price}</td>
                <td>{$value->goods_number}</td>
                <td><img src="{$value->goods_logo}"></td>
                <td class="status" data-id="{$value->id}" data-value="{$value->status}">{$value->goods_status==1 ?"<font color='red'>上架</font>" :"<font color='blue'>下架</font>" }</td>
                <td>{$value->create_time}</td>
                <td>
                    <a href="/admin/goodsEditor?id={$value->id}"> 编辑 </a>
                    <a href="javascript:void(0);" class="delete" data-id="{$value->id}"> 删除 </a>
                </td>
            </tr>
        {/foreach}
        </tbody>
    </table>
    <!-- pagination -->
    <div class="pagination">
<!--       展示分页页码-->
        {$data|raw}
    </div>
</div>

<!-- footer -->
<footer>
    <hr>
    <p>© 2017 <a href="javascript:void(0);" target="_blank">ADMIN</a></p>
</footer>

<script>

    // 批量删除

    // 第一步 按钮绑定事件(首先有个按钮)
    $('.batch-del').click(function () {
        // alert(111);

        // 第二步 找到要删除的数据 每一行加一个复选框 可多选
        // 获取所有选中的复选框
        var checkboxAll = $(".checkbox:checked");// 多个
        // 获取所有删除数据的id、主键 i 下标 v对象
        var ids = [];
        checkboxAll.each(function (i,v) {
           ids.push($(v).attr('data-id'));
        })

        $.ajax({
            url:'/admin/goodsBatchDel',
            data:{ids:ids},
            type:'post',
            dataType:'json',
            success:function (response) {
                alert(response.msg)
                if (response.code  == 200) {
                    // 重新加载页面
                    location.href = '/admin/goodsList';
                }
                // console.log(response);
            }
        })
    });


    // <!--ajax删除数据-->
    $('.delete').click(function () {
        // alert(111);// 测试点击事件是否成功
        // return false;
        var select  = confirm("是否确定删除")
        // console.log(select);
        // 删除之前、获取要删除数据
        var id= $(this).attr('data-id');
        if (select) {
            // 确认删除之后发送ajax
            $.ajax({
                url:'/admin/goodsDel',
                data:{id:id},
                type:'post',
                dataType:'json',
                success:function (response) {
                    alert(response.msg)
                    if (response.code  == 200) {
                        // 重新加载页面
                        location.href = '/admin/goodsList';
                    }
                    // console.log(response);
                }
            })
        }

    });

    // 即点即改
    // 点击事件成功
    $('.status').click(function () {
        // 下一步 获取要修改数据id
        var id= $(this).attr('data-id');// 获取自定义属性的值
        var status = $(this).text();// 获取到是汉字
        var that = $(this);//当前点击对象
        // 发送ajax请求
        // 确认删除之后发送ajax
        $.ajax({
            url:'/admin/updateStatus',
            data:{id:id},
            type:'post',
            dataType:'json',
            success:function (response) {
                alert(response.msg);
                // 修改页面显示结果、后台返回成功
                if (response.code == 200) {
                    if (status == '上架'){
                        that.html("<font color='blue'>下架</font>")
                    } else {
                        that.html("<font color='red'>上架</font>")
                    }
                }


            }
        })
    })

</script>